<template>
	<view>
		<section>
			<view v-for="(item,li) in userattention" :key="li" class="userattention-box">
				<view class="userattention-box-image">
					<image :src="item.attentionimage" mode="" class="userattention-image"></image>
				</view>
				<view class="userattention-titles">
					<view class="userattention-message">
						<view class="userattention-name">
							{{item.usernameattention}}
						</view>
						<view class="userattention-title-date">
							<text class="attention-nate">{{item.attentionnate}}</text>
							<text class="attention-date">{{item.attentiondate}}</text>
						</view>
					</view>
				</view>
				<view class="backturn-content">
					<view class="backturn-content-backturn" v-show="backturnContent" @click="backturnContents">
						{{item.backturn}}
					</view>
					<view class="backturn-content-followed" v-show="followed">
						{{item.followed}}
					</view>
				</view>
			</view>
		</section>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				backturnContent:true,
				followed:false,
				userattention: [{
/* 					attentionimage:require(""), */
					usernameattention:"魂天",
					attentionnate:"开始关注你了",
					attentiondate:"05-22",
					backturn:"回关",
					followed:"已关注"
				}]
			}
		},
		methods: {
            backturnContents(){
				this.backturnContent = false;
				this.followed = true;
			}
		}
	}
</script>

<style scoped>
	.userattention-box {
		width: 100%;
		height: 200rpx;
	/* 	background-color: aquamarine; */
		display: flex;
		border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
		border-top: 1rpx solid rgba(0, 0, 0, 0.1);
	}
	.userattention-box-image{
		width: 20%;
		height: 200rpx;
	/* 	background-color: darkmagenta; */
    }
	.userattention-box-image>.userattention-image{
		width: 90rpx;
		height: 90rpx;
		object-fit: cover;
		object-position: center;
		border-radius: 50%;
		display: block;
		margin: auto;
		margin-top: 40rpx;
	}
	.userattention-box>.userattention-titles{
		width: 55%;
		height: 200rpx;
		/* background-color: aqua; */
	}

	.userattention-box>.userattention-titles>.userattention-message{
		width: 100%;
		height: 100rpx;
	/* 	background-color: bisque; */
		margin-top: 40rpx;
	}
	.userattention-box>.userattention-titles>.userattention-message>.userattention-name{
		width: 100%;
		height: 50rpx;
	/* 	background-color: darkgreen; */
		font-size: 33rpx;
	}attention
	.userattention-box>.userattention-titles>.userattention-message>.userattention-title-date{
		width: 100%;
		height: 42rpx;
	/* 	background-color: darkgoldenrod; */
	}
	.userattention-box>.userattention-titles>.userattention-message>.userattention-title-date>.attention-nate{
		font-size: 24rpx;
		line-height: 42rpx;
	/* 	background-color: fuchsia; */
	}
	.userattention-box>.userattention-titles>.userattention-message>.userattention-title-date>.attention-date{
		font-size: 24rpx;
		line-height: 42rpx;
		margin-left: 20rpx;
		/* background-color: fuchsia; */
	}
	.userattention-box>.userattention-titles>.private-letter{
		width: 100%;
		height: 110rpx;
	 /*   background-color: antiquewhite;	 */
	    display: flex;
		align-items: center;
	}
	.userattention-box>.userattention-titles>.private-letter>.private-letter-thank{
		width: 180rpx;
		height: 50rpx;
		background-color: rgb(235, 235, 246);
		border-radius: 30rpx;
		font-size: 28rpx;
		text-align: center;
		line-height: 50rpx;
	}
	.userattention-box>.backturn-content{
		width: 25%;
		height: 200rpx;
	/* 	background-color: brown; */
		display: flex;
		align-items: center;
	}
	.userattention-box>.backturn-content>.backturn-content-backturn{
		width: 150rpx;
		height: 60rpx;
		border-radius: 30rpx;
		border: 1rpx solid red;
		color: red;
		text-align: center;
		line-height: 60rpx;
	}
	.backturn-content-followed{
		width: 150rpx;
		height: 60rpx;
		border-radius: 30rpx;
		border: 1rpx solid rgba(0, 0, 0, 0.1);
		color: rgba(0, 0, 0, 0.1);
		text-align: center;
		line-height: 60rpx;
	}
</style>
